export default class Clock extends zrender.Group{
    constructor(){
        super();
        this.interval=null;
        this.renderClockContainer();   //时钟 轮廓
        this.renderGradute();          //刻度
        this.renderNeedle();           //时针，分针，秒针
        this.start();                  //开始
    }
    renderClockContainer(){
       this.outerCircle=new zrender.Circle({
           style:{
               fill:'#ccc'
           },
           shape:{
               cx:80,
               cy:80,
               r:80
           },
           z:1
       });
       this.interCircle=new zrender.Circle({
        style:{
            fill:'#fff'
        },
        shape:{
            cx:80,
            cy:80,
            r:70,
        },
        z:1
       });
       this.circle=new zrender.Circle({
        style:{
            fill:'red'
        },
        shape:{
            cx:80,
            cy:80,
            r:4,
        },
        z:6
       })
       this.add(this.outerCircle);
       this.add(this.interCircle);
       this.add(this.circle);
    }
    renderGradute(){
        var angle=Math.PI/2;
        var textPos=['right','bottom','left','top']
        for(var i=0;i<=3;i++){
           var rect=new zrender.Rect({
               style:{
                   fill:'transparent',
                   text:(i+1)*3,
                   textFill:'#333',
                   fontSize:10,
                   textPosition:textPos[i],
               },
               shape:{
                   x:80,
                   y:80,
                   width:50,
                   height:2
               },
               rotation:-angle*i,
               origin:[80,80],
               z:3
           });
           this.add(rect);
        }
    }
    renderNeedle(){
          this.hour=new zrender.Rect({
              style:{
                  stroke:'#333',
              },
              shape:{
                  x:70,
                  y:78,
                  width:40,
                  height:3,
                  r:[2]
              },
              origin:[80,80],
              z:2
          });

        this.min=new zrender.Rect({
            style:{
                stroke:'#333',
            },
            shape:{
                x:70,
                y:79,
                width:50,
                height:2,
                r:[2]
            },
            origin:[80,80],
            z:3
        });
        this.sec=new zrender.Rect({
            style:{
                stroke:'red',
            },
            shape:{
                x:70,
                y:80,
                width:60,
                height:1,
                r:[2]
            },
            origin:[80,80],
            z:4
        });
        this.add(this.hour);
        this.add(this.min);
        this.add(this.sec)
    }
    start(){
        var me=this;
        function animate(){
              var d=new Date();
              var hour=d.getHours();
              var min=d.getMinutes();
              var sec=d.getSeconds();
              var h=hour>=12?hour-12:hour;
              var hourAngle=h/12*Math.PI*2;
              var minAngle=min/60*Math.PI*2;
              var secAngle=sec/60*Math.PI*2;
              me.hour.attr({
                  rotation:-hourAngle+Math.PI/2-min/60*Math.PI/6
              });
              me.min.attr({
                rotation:-minAngle+Math.PI/2
            });
            me.sec.attr({
                rotation:-secAngle+Math.PI/2
            });
            me.interval=requestAnimationFrame( animate );
        }
        animate();
    }
    stop(){
        cancelAnimationFrame(me.interval);
    }

}
